<template>
  <pay-page
    class="fontsize40"
    icon="icon-cancel"
    title="确认支付"
  >
    <div class="flex-v pay-wrapper">
      <p>
        <span class="fontsize32">¥</span><span class="fontsize52">{{amount}}</span>
      </p>
      <div
        class="flex-h fontsize32"
        @click="goToChoosePayType"
      >
        <span class="payment-name-txt">支付方式</span>
        <span class="flex1"></span>
        <span class="payment-name-ellipsis">{{payType.paymentName}}</span>
        <i class="iconfont icon-rightangel icon-right"></i>
      </div>
      <button
        class="fontsize30 pay-btn"
        @click="goToPay(payType, amount)"
      >立即付款</button>
    </div>
  </pay-page>
</template>

<script>
import BasePayPage from './BasePayPage'
export default {
  components: {
    'pay-page': BasePayPage
  },
  props: {
    // 展示当前支付类型
    payType: {
      type: Object,
      default: () => {
        return {}
      }
    },
    amount: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 点击当前支付类型去重新选择支付方式
    goToChoosePayType() {
      this.$emit('goNext')
    },
    // 支付扣款处理
    goToPay(payType, amount) {
      this.$emit('goPay', payType, amount)
    }
  }
}
</script>

<style scoped>
.pay-wrapper {
  padding: 0 30px;
}
.pay-wrapper > p {
  margin: 0 auto;
}
.pay-wrapper > p > span {
  height: 133px;
  line-height: 133px;
  color: #333;
  text-align: center;
  font-weight: 500;
}
.pay-wrapper > div {
  height: 133px;
  line-height: 133px;
}
.payment-name-txt {
  margin-right: 80px;
}
.payment-name-ellipsis {
  max-width: 400px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-right {
  margin-left: 30px;
  color: #ccc;
}
.pay-btn {
  width: 690px;
  height: 80px;
  background: #3795ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  margin-top: 375px;
}
</style>
